<template>
   <view class="center">
		
		<view class="center_top">
			<view class="mask"></view>
		</view>
		<view class="center_box_bg">
			<view class="profily">
				<!-- 校友资讯 找校友 活动 互助     相册 我的 人脸识别 关于我们-->
				<!-- 第一行 -->
				<view class="flex-row equal-division">
				
					<view class="equal-division-item flex-col items-center" @click="go(1)">
						<image src="../../static/home/zixun.png" class="image_4"/>
						<text class="text_2">校友资讯</text>
					</view>
					
					<view class="equal-division-item flex-col items-center" @click="go(2)">
						<image src="../../static/home/xiaoyou.png" class="image_4"/>
						<text class="text_2">找校友</text>
					</view>
					
					<view class="equal-division-item flex-col items-center" @click="go(3)">
						<image src="../../static/home/huodong.png" class="image_4"/>
						<text class="text_2">活动</text>
					</view>
					
					<view class="equal-division-item flex-col items-center" @click="go(4)">
						<image src="../../static/home/huzhu.png" class="image_4"/>
						<text class="text_2">互助</text>
					</view>
		
				 
				</view>
				
				<!-- 第二行 -->
				<view class="flex-row equal-division">
				 
					<view class="equal-division-item flex-col items-center" @click="go(5)">
						<image src="../../static/home/xc.png" class="image_4"/>
						<text class="text_2">相册</text>
					</view>
					
					<view class="equal-division-item flex-col items-center" @click="go(7)">
						<image src="../../static/home/face.png" class="image_4"/>
						<text class="text_2">人脸识别</text>
					</view>
					
					<view class="equal-division-item flex-col items-center" @click="go(6)">
						<image src="../../static/tabbar/my_active.png" class="image_4"/>
						<text class="text_2">我的</text>
					</view>			
					
					<view class="equal-division-item flex-col items-center" @click="go(8)">
						<image src="../../static/home/about.png" class="image_4"/>
						<text class="text_2">关于我们</text>
					</view>
					
				
				</view>
			</view>
		</view>
		
		<view class="baiban">
		
		</view>
		
		<!-- 内容 -->
		<!-- 校友资讯 -->
		<view style="display: flex; margin-top: 20px;">
			<image class="shuxian" src="../../static/shu.png"></image>
			<text class="title">校友资讯</text>
			<view style="display: flex; margin-left: auto;" @click="go(1)">
				<text class="title">更多</text>
				<image class="gengduo" src="http://qiniu.chzuchen.xyz/other/3a9fb7a8e99147da89cf76972083c060.png"></image>
			</view>
		</view>
			<!-- 资讯列表 -->
		<view v-for="(item, index) in newsList" :key="item.id">
			<!-- 资讯一 -->
			<view class="content2" @click="new_info(item.id)" v-if="index<3">
				<view class="content_title">
					<text >{{item.newsTitle}}</text>
				</view>
				<view class="content_content">
					<div class='u-line-3' >
						<view class="u-content" >
							<u-parse v-if="item.imageUrlList" style='width: 230px;' :html="item.newsContent" :selectable="true"></u-parse>
							<u-parse v-else :html="item.newsContent" style='width: 330px;' :selectable="true"></u-parse>
						</view>
					</div>
								
					<div v-if="item.imageUrlList">
						<image class="content_image"
						   mode="aspectFill" 
						   :src="item.imageUrlList[0]"
							@error="imageError">
						</image>
					</div>
				</view>
				<view class="content_zan">
					<!-- <view style="margin-right: 10px; color: #193867; font-size: 14px;">
						{{item.classificationName}}
					</view> -->
					<view style="margin-right: 10px;">
						<u-icon size="30" name="thumb-up-fill" style="margin-right: 3px;"></u-icon> {{item.supportNumber}}
					</view>
					<view style="margin-right: 10px;">
						<u-icon size="30" name="star-fill" style="margin-right: 3px;"></u-icon> {{item.collectionNumber}}
					</view>
					
					{{item.updateTime}}
				</view>
				<u-line color="#bfbfbf" length='90%' :hair-line='false' margin="20rpx 48rpx"/>
			</view>
			
		</view>
		
		<!-- 校友相册 -->
		<view style="display: flex; margin-top: 20px;">
			<image class="shuxian" src="../../static/shu.png"></image>
			<text class="title">校友相册</text>
			<view style="display: flex; margin-left: auto;" @click="go(5)">
				<text class="title">更多</text>
				<image class="gengduo" src="http://qiniu.chzuchen.xyz/other/3a9fb7a8e99147da89cf76972083c060.png"></image>
			</view>
		</view>
			<!-- 相册列表 -->
		<view v-for="(item, index) in albumList" :key="item.id">
			
			<view class="content2" @click="album_info(item.id)">
				<view class="content_title">
					<text >{{item.albumTitle}}</text>
				</view>
				
				<!-- 判断全是图片 or 有文字 -->
				<view v-if="item.albumDescription" class="content_content">
					<div class='u-line-3' >
						<view class="u-content" >
							<u-parse v-if="item.imageUrlList" style='width: 230px;' :html="item.albumDescription" :selectable="true"></u-parse>
							<u-parse v-else :html="item.albumDescription" style='width: 330px;' :selectable="true"></u-parse>
						</view>
					</div>
							
					<div v-if="item.imageUrlList">
						<image class="content_image"
						   mode="aspectFill" 
						   :src="item.imageUrlList[0]"
							@error="imageError">
						</image>
					</div>
				</view>
				
				<view v-else class="content_content" >
					<image class="content_image"
						   v-for="(imageUrl, urlIndex) in item.imageUrlList"
						   :key='imageUrl'
						   v-if="urlIndex<3" style="margin-right: 27rpx;"
						   mode="aspectFill" 
						   :src="imageUrl"
						   @error="imageError"
					>
					</image>
				</view>
				<!-- 赞、收藏等 -->
				<view class="content_zan">
					<!-- <view style="margin-right: 10px; color: #193867; font-size: 14px;">
						{{item.classificationName}}
					</view> -->
					<view style="margin-right: 10px;">
						<u-icon size="30" name="thumb-up-fill" style="margin-right: 3px;"></u-icon> {{item.supportNumber}}
					</view>
					<view style="margin-right: 10px;">
						<u-icon size="30" name="star-fill" style="margin-right: 3px;"></u-icon> {{item.collectionNumber}}
					</view>
					
					{{item.updateTime}}
				</view>
				<u-line color="#bfbfbf" length='90%' :hair-line='false' margin="20rpx 48rpx"/>
			</view>
		
		</view>
			
		
		<!-- 活动集锦 -->
		<view style="display: flex; margin-top: 20px;">
			<image class="shuxian" src="../../static/shu.png"></image>
			<text class="title">活动集锦</text>
			<view style="display: flex; margin-left: auto;" @click="go(3)">
				<text class="title">更多</text>
				<image class="gengduo" src="http://qiniu.chzuchen.xyz/other/3a9fb7a8e99147da89cf76972083c060.png"></image>
			</view>
		</view>
			<!-- 活动列表 -->
		<view v-for="(item, index) in activityList" :key="item.id">
			
			<!-- 活动一 -->
			<view class="content2" @click="activity_info(item.id)" v-if="index<3">
				<view class="content_title">
					<text >{{item.activityTitle}}</text>
				</view>
				<view class="content_content">
					<div class='u-line-3' >
						<view class="u-content" >
							<u-parse v-if="item.imageUrlList" style='width: 230px;' :html="item.detailedDescription" :selectable="true"></u-parse>
							<u-parse v-else :html="item.detailedDescription" style='width: 330px;' :selectable="true"></u-parse>
						</view>
					</div>
								
					<div v-if="item.imageUrlList">
						<image class="content_image"
						   mode="aspectFill" 
						   :src="item.imageUrlList[0]"
							@error="imageError">
						</image>
					</div>
				</view>
				<view class="content_zan">
					<!-- <view style="margin-right: 10px; color: #193867; font-size: 14px;">
						{{item.classificationName}}
					</view> -->
					<view style="margin-right: 10px;">
						<u-icon size="30" name="thumb-up-fill" style="margin-right: 3px;"></u-icon> {{item.supportNumber}}
					</view>
					<view style="margin-right: 10px;">
						<u-icon size="30" name="star-fill" style="margin-right: 3px;"></u-icon> {{item.collectionNumber}}
					</view>
					
					{{item.updateTime}}
				</view>
				<u-line color="#bfbfbf" length='90%' :hair-line='false' margin="20rpx 48rpx"/>
			</view>
					
		</view>
	
		<!-- 底部 -->
		<view style="margin-top: 25px;">
			<view style="text-align: center;">
			<navigator url="../about/about"> 首页 | 关于我们 </navigator>
			</view>
			<view style="text-align: center; margin-top: 10rpx;">
				<text>欢迎使用@滁院校友圈</text>
			</view>
		</view>
		
		
		<!-- tabbar -->
        <view class="content" @click="hideDrawer">
            <tabbar :pagePath="'pages/home/home'"></tabbar>
            <zl-down :isDownShow="isDownShow" @choseBtn="choseBtn"></zl-down>
        </view>

    </view>
</template>

<script>
    import zlDown from '../../components/zlDown/zlDown.vue'
    export default {
        components: {
            zlDown
        },
        data() {
            return {
                title: '我是首页',
                isDownShow: false,
				newsList: {},
				albumList: {},
				activityList: {},
				params: {
					page: 1,
					size: 4,
				}
            }
        },
        onLoad() {
            uni.hideTabBar();
			this.getNewsList();
			this.getAlbumList();
			this.getActivityList();
        },
        methods: {
            onNavigationBarButtonTap() {
                this.isDownShow = !this.isDownShow
            },
            hideDrawer() { 
                if (this.isDownShow == true)
                    this.isDownShow = false
            },
            choseBtn(val) {
                this.isDownShow = true
                uni.showToast({
                    title:val.name
                })
            },
			//校友资讯
			async getNewsList() {
				await this.$u.api.newsSelectBy(this.params).then(res=>{
					if(res.code == 200) {
						this.newsList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"资讯获取失败"
						})
					}
				})
			},
			//校友相册
			async getAlbumList() {
				await this.$u.api.albumSelectBy(this.params).then(res=>{
					if(res.code == 200) {
						this.albumList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"相册获取失败"
						})
					}
				})
			},
			//活动集锦
			async getActivityList() {
				await this.$u.api.activitySelectBy(this.params).then(res=>{
					if(res.code == 200) {
						this.activityList = res.data
					} else {
						uni.showToast({
							icon:"error",
							title:"活动获取失败"
						})
					}
				})
			},
			//页面跳转
			go(index) {
				if(index==1) {
					uni.navigateTo({
						url: "../news/news"
					});
				} else if(index==2) {
					uni.switchTab({
						url: "../seach/seach"
					});
				} else if(index==3) {
					uni.switchTab({
						url: "../activity/activity"
					});
				} else if(index==4) {
					uni.switchTab({
						url: "../help/help"
					});
				} else if(index==5) {
					uni.navigateTo({
						url: "../album/album"
					});
				} else if(index==6) {
					uni.switchTab({
						url: "../my/my_index"
					});
				} else if(index==7) {
					uni.navigateTo({
						url: "../seach/seach_face"
					})
				} else if(index==8) {
					uni.navigateTo({
						url: "../about/about"
					});
				}
			},
        },
		//上拉刷新
		onPullDownRefresh() {
			//置空后重新获取第一页
			this.getNewsList();
			this.getAlbumList();
			this.getActivityList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
    }
</script>

<style lang="scss">
    .content {
       height: 15vh;
    }
	page {
		height: 100%;
	}
	.profily,
	.profily_header {
		border-radius: 8px;
	}
	.center {
		height: 100%;
	
		&_top {
			height: 15%;
			width: 100%;
			background: url('http://qiniu.chzuchen.xyz/other/969f8ad950a44587b1a4bc0ad1a2c783.jpg') no-repeat 50% 50%;
			background-size: cover;
	
			// background: #E6E6E6;
			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}
	
		&_box_bg {
			background: #F9F9F9;
			position: relative;
	
			.profily {
				position: absolute;
				width: 90%;
				// border:1px solid #F7F7F7;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 0px 2px 5px #EDEDED;
			}
		}
	}
	.baiban {
		background: #FEFEFE;
		height: 250upx;
	}
	.image_4 {
	  width: 60rpx;
	  height: 60rpx;
	}
	.text_2 {
	  margin-top: 16rpx;
	}
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	.items-center {
	  display: flex;
	  align-items: center;
	}
	
	.equal-division-item {
	  flex: 1 1 168rpx;
	  padding: 10rpx 0;
	 
	}
	.shuxian {
		width: 100rpx;
		height: 60rpx;
	}
	.title {
		margin-left: -30rpx; 
		font-size: 17px; 
		font-weight: 900; 
		margin-top: 4px; 
		color: #193867;
	}
	.gengduo {
		width: 18px;
		height: 18px;
		margin-top: 8px;
		margin-left: 3px;
		margin-right: 20px;
	}

	.content2 {
		.content_title {
			font-weight: 800; 
			font-size: 15px; 
			margin-left: 25px;
			margin-top: 5px; 
			width: 330px;
			display: flex;
		}
		.content_content {
			font-size: 14px;
			margin-left: 25px;
			margin-top: 10px; 
			display: flex;
			height: 55px;
		}
		.content_zan {
			margin-left: 25px; 
			margin-top: 20px; 
			color: #bfbfbf; 
			display: flex;
		}
		.content_image {
			width: 200rpx;
			height: 120rpx; 
			background-color: #eeeeee; 
			border-radius: 10px;
			background-color: rgba(135, 135, 135, 0.5);
		}
	}
</style>